import React from 'react';
import { Timeline } from 'antd';
import { CheckCircleFilled, ClockCircleFilled } from '@ant-design/icons';
import { WorkflowTimelineProps } from '../types';
import { NODE_STATUS_COLOR } from '../constants';
import styles from './index.less';

const WorkflowTimeline: React.FC<WorkflowTimelineProps> = ({ workflow }) => {
  // 获取节点图标
  const getNodeIcon = (status: string) => {
    if (status === 'completed') {
      return <CheckCircleFilled style={{ color: NODE_STATUS_COLOR.completed }} />;
    }
    return <ClockCircleFilled style={{ color: NODE_STATUS_COLOR.processing }} />;
  };

  // 获取节点类名
  const getNodeClassName = (index: number) => {
    const classNames = [styles['timeline-item']];
    
    if (index === 0) {
      classNames.push(styles['timeline-item-start']);
    } else if (index === workflow.nodes.length - 1) {
      classNames.push(styles['timeline-item-end']);
    }
    
    if (index === workflow.currentNode) {
      classNames.push(styles['timeline-item-current']);
    }
    
    return classNames.join(' ');
  };

  return (
    <div className={styles['workflow-timeline']}>
      <h2 className={styles['timeline-title']}>审批进程</h2>
      <Timeline>
        {workflow.nodes.map((node, index) => (
          <Timeline.Item
            key={index}
            dot={getNodeIcon(node.status)}
            className={getNodeClassName(index)}
          >
            <div className={styles['timeline-content']}>
              <h3 className={styles['timeline-title-text']}>{node.name}</h3>
              {node.processor && (
                <div className={styles['timeline-info']}>
                  <div>{node.processor}</div>
                  {node.processTime && <div>处理时间：{node.processTime}</div>}
                  {node.result && (
                    <div className={styles['timeline-result']}>
                      【{node.result === '同意' ? '同意' : '已处理'}】处理结果：{node.result}
                    </div>
                  )}
                </div>
              )}
            </div>
          </Timeline.Item>
        ))}
      </Timeline>
    </div>
  );
};

export default WorkflowTimeline; 